<template>
  <div class="student">
    <el-card>
      <div class="search">
        <el-form :inline="true">
          <el-form-item label="用户名：">
            <el-input v-model="name" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 列表 -->
       <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="Id" width="180" />
        <el-table-column prop="title" label="标题" width="180" />
        <el-table-column prop="content" label="内容" />
        <el-table-column prop="sendUserName" label="发送人" />
        <el-table-column prop="receives" label="接收人" />
        <el-table-column prop="readCount" label="已读数" />
        <el-table-column prop="receiveUserCount" label="接收人数" />
        <el-table-column prop="createTime" label="创建时间" />
      </el-table>
      <div style="margin-top: 20px;">
        <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
          :page-sizes="[100, 200, 300, 400]" layout="total, sizes, prev, pager, next, jumper" :total="400"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>

    </el-card>
  </div>
</template>
<script setup lang="ts">
import UserAPI, { type messageParams, type MessageType } from "@/api/system/user.api"
import { ref } from "vue"
let name = ref("")
const tableData = ref<MessageType[]>([])
const currentPage4 = ref(1)
const pageSize4 = ref(10)
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  params.value.pageSize = val
  getLIst()
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  params.value.pageIndex = val
  getLIst()
}


// 接口参数
let params = ref<messageParams>({
  pageIndex: 1,
  pageSize: 10,
  sendUserName:null
})

// 获取列表
function getLIst() {
  UserAPI.getmessage(params.value).then(data => {
    console.log(data);
    tableData.value=data.list
  })
}
onMounted(async () => {
  getLIst()
})


</script>
<style scoped lang="scss">
.student {
  padding: 16px;
}
</style>